<template>
  <div class="speed-up" ref="draggable" @mousedown="handleMouseDown" @touchstart="handleMouseDown">

    <div class="content">

      <img src="../assets/images/downicon.png" alt="">
      <div class="content-info">

        <div class="text">{{ $t('title.doc57') }}</div>
        <van-count-down :time="downtime * 1000" class="count-down" @finish="onFinish">
          <template #default="timeData">
            <span class="block">{{ stuff(gethour(timeData.hours, timeData.days)) }}</span>
            <span class="colon">:</span>
            <span class="block">{{ stuff(timeData.minutes) }}</span>
            <span class="colon">:</span>
            <span class="block">{{ stuff(timeData.seconds) }}</span>
          </template>
        </van-count-down>
      </div>
    </div>
  </div>
</template>

<script>
import { bus } from "@/utils/http";
export default {
  props: {
    downtime: [Number, 0]
  },
  data() {
    return {
      startY: 0,
      currentY: 0,
      element: null,
      lastPageY: 0,
      maxHeight: window.innerHeight - 100, // 假设元素高度为100px
      minHeight: 10,
      dragging: false,
      startTime: 0
    }
  },
  mounted() {
    this.element = this.$refs.draggable;

  },
  beforeDestroy() {
    //this.element.removeEventListener('mousedown', this.handleMouseDown);
  },
  methods: {
    handleMouseDown(e) {
      this.dragging = false;
      this.startTime = new Date().getTime();
      // 记录初始位置
      this.startY = e.type === 'touchstart' ? e.touches[0].pageY : e.clientY;
      this.lastPageY = this.startY;
      // 添加鼠标移动和鼠标松开的事件监听
      document.addEventListener('mousemove', this.handleMouseMove);
      document.addEventListener('mouseup', this.handleMouseUp);
      document.addEventListener('touchmove', this.handleMouseMove);
      document.addEventListener('touchend', this.handleMouseUp);
      // 防止文本选择
      e.preventDefault();
    },
    handleMouseMove(e) {
      // 计算移动距离

      const pageY = e.type === 'touchmove' ? e.touches[0].pageY : e.clientY;
      const deltaY = pageY - this.lastPageY;
      if (deltaY > 5) {
        this.dragging = true;
      }
      // 更新元素位置
      let newTop = this.$refs.draggable.offsetTop + deltaY;
      // 限制元素不超出屏幕边界
      newTop = Math.max(this.minHeight, Math.min(newTop, this.maxHeight));
      this.$refs.draggable.style.top = `${newTop}px`;
      // 更新上次位置
      this.lastPageY = pageY;

    },
    handleMouseUp() {
      this.dragging = false;
      const endTime = new Date().getTime();
      const timeDiff = endTime - this.startTime; // 计算时间差
      if (timeDiff < 200 && !this.isDragging) {
        // 时间差小于200ms且没有发生拖拽，则认为是点击
        bus.$emit('showrules', 1)
      }
      // 移除鼠标移动和鼠标松开的事件监听
      document.removeEventListener('mousemove', this.handleMouseMove);
      document.removeEventListener('mouseup', this.handleMouseUp);
      document.removeEventListener('touchmove', this.handleMouseMove);
      document.removeEventListener('touchend', this.handleMouseUp);

    },
    gethour(h, d) {
      return parseFloat(h + d * 24)
    },
    stuff(num) {
      return num < 10 ? '0' + num : num
    },
    onFinish(val) {
      bus.$emit('showpopup', 0);
    }
  },

}
</script>

<style lang="less" scoped>
.speed-up {
  width: calc(100% - .46rem);
  max-width: 8.04rem;
  padding: .04rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #121622;
  border-radius: .16rem;
  position: relative;
  position: fixed;
  top: 0.48rem;
  left: 50%;
  z-index: 100;
  overflow: hidden;
  transform: translateX(-50%);

  .info11 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 44;
    width: 2rem;
    height: .88rem;
  }

  .content {
    width: 100%;
    height: calc(100% - 4px);
    padding: .2rem;

    background: #121622;
    border-radius: .16rem;
    display: flex;
    align-items: center;
    position: relative;
    color: #05A36B;
    z-index: 2;

    img {
      width: .64rem;
      height: .64rem;
      margin-right: .16rem;
    }

    .content-info {
      flex: 1;
      display: flex;

      .text {
        font-size: .36rem;
        color: #FF0000;
        line-height: .64rem;
        font-weight: 600;
      }
    }

    .count-down {
      color: #FB2122;
      font-size: .36rem;
      font-weight: 600;
      line-height: .64rem;
    }
  }

  &:before {
    content: "";
    width: 200%;
    aspect-ratio: 1 / 1;
    background-color: #121622;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: conic-gradient(transparent, #7B02FE, #121622, #121622, #0570FD, transparent 100%);
    z-index: 0;
    animation: rotate 5s linear infinite;
  }

  @keyframes rotate {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(720deg);
    }
  }
}
</style>